<template>
  <div class="nav-tab-wrapper social-login-buttons flex flex-wrap items-center">
    <div class="nav-item-bg rounded-lg cursor-pointer mr-2" v-for="item in cacheRoute" :key="item.url">
      <router-link :to="item.url">{{item.name}}</router-link>
      <span class="close-btn-wrapper">
        <feather-icon icon="XCircleIcon" :svgClasses="['stoke-current text-primary', {'text-white': navbarColor = '#fff'}]" class="cursor-pointer h-4 w-4 closeIcon" @click.stop="closeTab(item)" />
      </span>
    </div>
  </div>

</template>
<script>
import themeConfig from '@/../themeConfig.js';
  export default {
    data(){
      return {
        navbarColor: themeConfig.navbarColor || '#fff'
      }
    },
    computed:{
      cacheRoute(){
        return this.$store.state.cacheRoute
      }
    },
    methods:{
      closeTab(item){
        this.$store.dispatch('deleteCacheRoute',item)
      }
    }
  }
</script>
<style lang="scss">
@import "@/assets/scss/baseColor.scss";

.social-login-buttons {
    position:absolute;
    font-size:10px;
    .nav-item-bg {
      position: relative;
        background-color: $mainColor;
        padding:3px 18px 3px 6px;
        color:#fff!important;
        a{
          color:#fff!important;
        }
        .close-btn-wrapper{
          position: absolute;
          top: 4px;
          margin-left: 2px;
          .closeIcon{
            font-size:8px;
          }
        }
    }
}
</style>
